<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/user_khd.css" />
	<link rel="stylesheet" href="css/zeroModal.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/base.js"></script>
	<script src="js/zeroModal.min.js"></script>
	<title>客户端用户管理</title>
	<style>
		.user_khd{height: 100%;}
		.user_con{
			display: flex;

		}
		.user_con span{
			padding: 2px 5px;
			border:1px solid #ccc;
			margin-top:20px;
			font-weight:normal;
			margin-right:10px;
			cursor: pointer;
		}
		table {
			border-collapse: collapse;
		}
		table td{
			border:1px solid #cccc;
		
		}
		.jx_list{
			width: 200px;
		}
		.jx_list tr,td{
			text-align: center;
		}
		.jx_list td{
			height:30px;
		}
		.n_title{
			border-bottom: 1px solid #ccc;
		}
		.n_title input {
			border:none;
			outline: none;
		}
		.qx_bar{
			display:flex;
			margin-top:20px;
		}
		.qx_bar span{
			padding:2px 5px;
			border:1px solid #000;
			font-weight: normal;
			margin-right:40px;
			border-radius: 2px;
			cursor: pointer;
		}
		.scjq_qx{
			border:1px solid #ccc;
			display: inline-block;
			padding:3px 5px;
			
			margin-left:40px;
			display:none;
		}
		.sq_fath{
			margin-top:20px;
		}
	</style>
</head>
<body>
	<div class="wrapper" style="height: 100%;">
		<div class="wrapper-box" style="height: 100%;">
			<span class="user_span">
				<em>CMS用户管理</em>
				<em>CMS角色管理</em>
				<em>客户端用户管理</em>
			</span>
			<div class="user_khd active" >
				<iframe width="100%"  height="100%" src="./user_list.html" frameborder="0"></iframe>
			</div>
			<div class="user_khd" >
				<div class="js_qx">
					<div class="user_con" >
						<span class="js_xzjs">新增角色</span>
						<span class="js_xgjs">修改角色</span>
						<span class="js_scjs">删除角色</span>
					</div>
					<div style="margin-top:20px;" class="js_tab">
						<table style="position: relative;left:46px;" cellspacing="0" cellpadding="0" class="qx_list jx_list">
							<thead>
								<tr>
									<td>id</td>
									<td>角色名称</td>
								</tr>
							</thead>
							<tbody class="jq_qx_list" style="font-weight: normal">
							</tbody>
						</table>
					   <div class="sq_fath">
						   <span class="scjq_qx">删除</span>
					   </div>
					</div>
					<div class="js_tab" style="display: none">
						<div style="margin-top:30px;">
							<span>角色名称:</span>
							<span class="n_title"><input class="js_name" type="text"></span>
						</div>
						<div style="margin-top:20px;">
							<table style="position: relative;" cellspacing="0" cellpadding="0" class="qx_list jx_list">
								<thead>
									<tr>
										<td>id</td>
										<td>角色权限</td>
									</tr>
								</thead>
								<tbody class="qx_list_add" style="font-weight: normal">
								</tbody>
							</table>
							<div class="qx_bar">
								<span class="add_jx">创建</span>
								<span class="add_jx_qx">修改</span>
								<span class="qx_quxiao">取消</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="user_khd">
				<iframe width="100%" height="100%" src="./user_list_app.html" frameborder="0"></iframe>
			</div>
		</div>
	</div>
	<script src="js/user_khd.js"></script>
</body>
</html>